<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
  </head>
  <body>
    <button>测试拦截器</button>
    <script>
      // 添加请求拦截器
      axios.interceptors.request.use(
        function (config) {
          console.log('请求拦截器成功回调', config)
          return config;
        },
        function (error) {
          console.log('请求拦截器失败回调', error)
          return Promise.reject(error);
        }
      );
      axios.interceptors.request.use(
        function (config) {
          console.log('请求拦截器成功回调', config)
          return config;
        },
        // function (error) {
        //   console.log('请求拦截器失败回调', error)
        //   return Promise.reject(error);
        // }
      );

      // 添加响应拦截器
      axios.interceptors.response.use(
        function (response) {
          console.log('响应拦截器成功回调', response)
          return response;
        },
        function (error) {
          console.log('响应拦截器失败回调', error)
          return Promise.reject(error);
        }
      );

      const btn = document.querySelector('button');

      btn.onclick = function () {
        axios({
          url: 'http://localhost:8081/delay-server/aaa',
          method: 'post',
          params: {a: 1, b: 2},
          data: {c: 3, d: 4}
        }).then(
          response => {
            console.log('具体请求的成功回调', response)
          },
          error => {
            console.log('具体请求的失败回调', error)
          }
        )
      };

      /* 
      1. 请求拦截器回调
      2. 发请求
      3. 响应拦截器回调
      4. 具体请求的回调
      四个任务串连执行  => promise的then的链式调用
        axios(config)
        - Promise.resolve(config)  // 创建value为config的成功promise
        - 利用.then()串连执行上面的4个任务

        Promise.resolve(config) 
          .then(
            (config) => {
              return config  // 必须返回它 => 要交给发请求的回调
            },
            (error) => {}
          ) // 请求拦截器
          .then(
            (config) => { // 发请求
              return new Promise((resolve, reject) => {
                // 根据config来创建并配置xhr对象, 发异步ajax请求
                // 如果成功了, 
                  // 创建一个数据对象作为value: response = {data: JSON.parse(xhr.responseText), status, statusText}
                  // 调用resolve(response)
                // 如果失败了
                  // 创建一个数据对象为reason: error = new Error('request error status=' + xhr.status)
                  // 调用reject(error)
              })
            }
          ) // 发ajax请求
          .then(
            response => {

              return response // 默认
              return response.data  // 具体请求的成功回调得到的就是响应体数据
            },
            error => {
              throw error
              return Promise.reject(error)
            }
          ) // 响应拦截器
          .then(
            value => {  // 默认是response, 但修改是response.data

            },
            error => {

            }
          ) // 具体请求回调

      */

      /* 
      为什么要设计拦截器语法
      1. 所有请求都携带一个特定的请求头
      2. 所有请求发出去前打印一个日志输出
      3. 所有请求成功的value都是响应体, 直接得到response.data
      4. 所有请求失败了, 我做一个统一的错误提示
      */
    </script>
  </body>
</html>
